<style scoped lang="less">
.main-menu{
    height: 100%;
    .main-content{
        height: 100%;
        background-color: #545c64;
    }
    .el-menu-vertical-demo{
        border: none;
    }
    .logo{
        width: 210px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        .logo-img{
            width: 64px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            img{
                width: 30px;
                height: 30px;
                vertical-align: middle;
            }
        }
    }
}
</style>
<template>
    <div class="main-menu">
        <div class="main-content">
        <div class="logo">
            <div class="logo-img">
                <img src="@/assets/img/favicon.png" alt="">
            </div>
            <h2 v-show="!isFold.isFinite">cms管理系统</h2>
        </div>
        <div class="menuNav">
            <el-menu 
            active-text-color="#ffd04b"
            background-color="#545c64"
            :collapse="isFold.isFinite"
            class="el-menu-vertical-demo"
            :default-active="defaultOption"
            unique-opened
            text-color="#fff"
            >   
            <template v-for="(item, index) in userMenus" :key="item.id">
                <el-sub-menu  :index="`${index}`">
                    <template #title>
                        <!-- monitor -->
                        <el-icon><component :is="item.icon.split('-icon-')[1]" /></el-icon>
                        <span>{{ item.name }}</span>
                    </template>
                    <template  v-for="(subItem, subIndex) in item.children" :key="subItem.id">
                        <el-menu-item :index="`${subItem.id}#`" @click="handleSubItemClick(subItem)">
                            {{ subItem.name }}
                        </el-menu-item>
                    </template>
                </el-sub-menu>
            </template>
            </el-menu>
        </div>
    </div>
    </div>
</template>
<script setup lang="ts">
import { useLoginStore } from "@/stores/login/login"
import { onMounted, ref } from "vue";
import { useisFoldStore } from "@/stores/main/main";
import { useRouter, useRoute } from "vue-router";
import {mapPathToMenu} from "@/utils/mapMenus";
const router = useRouter() // 路由
const route = useRoute() // 路由信息
let isFold = useisFoldStore(); // 是否折叠
const userMenus = ref<[any]>()  // 用户菜单
let defaultOption = ref()  // 默认 激活的子菜单

onMounted(()=>{
    //  获取用户菜单
    const loginStore = useLoginStore()
    userMenus.value = loginStore.userMenus

    // 进入页面时 或者 刷新，默认展开的菜单
    const pathName = route.name  // 默认 展开的菜单
    const useMapPathToMenu = mapPathToMenu(pathName,userMenus.value)
    defaultOption.value = useMapPathToMenu.id + "#"
})


// 点击子菜单时，修改激活的菜单项，并跳转到对应的路由
function handleSubItemClick(item: any) {
    const routeName = item.routeName
    router.push({name: routeName})
}




</script>